import React, { useState } from 'react';  
  
export  function TodoList() {  
  // 使用useState钩子来维护todo列表和输入框的值  
  const [todos, setTodos] = useState([]);  
  const [inputValue, setInputValue] = useState('');  
  
  // 添加任务的处理函数  
  const handleAddTodo = () => {  
    // 忽略空字符串  
    if (!inputValue.trim()) return;  
    // 将新任务添加到列表中  
    setTodos([...todos, inputValue]);  
    // 清空输入框  
    setInputValue('');  
  };  
  
  // 删除任务的处理函数  
  const handleDeleteTodo = (index) => {  
    // 使用数组的filter方法来移除指定索引的任务  
    const updatedTodos = todos.filter((_, i) => i !== index);  
    setTodos(updatedTodos);  
  };  
  
  return (  
    <div>  
      <input  
        type="text"  
        value={inputValue}  
        onChange={(e) => setInputValue(e.target.value)}  
        placeholder="Add new todo..."  
      />  
      <button onClick={handleAddTodo}>Add</button>  
  
      <ul>  
        {todos.map((todo, index) => (  
          <li key={index}>  
            {todo}  
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>  
          </li>  
        ))}  
      </ul>  
    </div>  
  );  
}  
  
export default TodoList;